var USER_TABLE_TPL = `<div class="user-table">
	<el-table :data="data" border style="width: 100%">
	<el-table-column fixed prop="user_code" label="编号" width="120"></el-table-column>
    <el-table-column fixed prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="age" label="年龄" width="120"></el-table-column>
    <el-table-column prop="create_time" label="创建日时"> </el-table-column>
    <el-table-column prop="update_time" label="更新日时"> </el-table-column>
    <el-table-column prop="ip" label="IP地址"> </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
		<template slot-scope="scope">
			<el-button @click="doEdit(scope.row)" icon="el-icon-edit" type="primary" size="small" circle></el-button>
			<el-button @click="doDelete(scope.row)" icon="el-icon-delete" type="danger" size="small" circle></el-button>
		</template>
    </el-table-column>
  </el-table>
</div>`;
Vue.component('UserTableComponent', {
    template: USER_TABLE_TPL,
	data: function(){
    	return {
			parent: null,
    		data: []
    	}
    },
    mounted: function(){},
	methods: {
		init: function(app){ this.parent = app },
		search: function(params){
			var that = this;
			var uri = '/user/search'
			axios.get(uri, {params: params}).then(function (res) {
            	that.data = res.data.data
			}).catch(function (error) {
				console.error(error);
			}).then(function () {});
		},
		doEdit: function(item){
			var user_edit = this.parent.$refs.user_edit
			if(user_edit){
				user_edit.edit(item.user_code)
			}
		},
		doDelete: function(item){
			var that = this;
			var user_condition = this.parent.$refs.user_condition
			var uri = '/user/delete'
			axios.post(uri, {
				user_code: item.user_code
			}).then(function (res) {
				if(user_condition){
					user_condition.search()
				}
				that.visible = false
			}).catch(function (error) {
				console.error(error);
			}).then(function () {});
		}
	}
})